import React, { useState, useEffect } from 'react';
import {
  message,
  Drawer,
  Form,
  Input,
  Button,
  Radio,
  InputNumber,
  Row,
  Col,
  TreeSelect,
  Spin,
} from 'antd';
import { asynchTree } from '@/services/ant-design-pro/api';
import { addField, upadataField, getDetail, sysDeptAllTree } from '../api';
// import { getSysDeptTreelist } from '../../UserList/api';

import styles from '../index.less';

const UpdateForm = props => {
  // 结构化数据
  const { visible, onCancel, onSuccess, data, type, asynchTreeData } = props;

  // 初始化 form
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const [currentIndex, setCurrentIndex] = useState(0);
  // 部门tree
  // const [deptData, setDeptData] = useState();
  // const [deptValue, setDeptValue] = useState();
  const [dept, setDept] = useState(); //  站点树处理
  const [sysDeptAllTreeData, setSysDeptAllTreeData] = useState(); // 部门同步树

  // 区域 tree
  const [areaData, setAreaData] = useState([]);
  const [areaValue, setAreaValue] = useState();
  const [areaName, setAreaName] = useState();

  // 详情
  const getDetailData = () => {
    setLoading(true);
    getDetail(data.deptId).then(res => {
      setLoading(false);
      if (res.code === 0) {
        form.setFieldsValue({ ...res.data, ...data });
        // setDeptValue(res.data.parentId || '');
        setDept(res.data.parentId || '');
        setAreaName(res.data.branchName);
        setAreaValue(res.data.branchCode);
      } else {
        message.error(res.msg || '获取详情失败');
      }
    });
  };

  // 栅格化
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  };

  // const setTreeFormat = datas => {
  //   const newData = [];
  //   datas.map(item => {
  //     const obj = {
  //       id: item.deptId,
  //       value: item.deptId,
  //       pId: item.parentId,
  //       title: item.deptName,
  //       isLeaf: !item.parentNode,
  //     };
  //     newData.push(obj);
  //     return '';
  //   });
  //   return newData;
  // };

  /**
   * @zh-CN 部门同步树
   *
   * @param datas
   */

  const setTreeFormat = datas => {
    const newData = [];

    datas.map(item => {
      const obj = {
        id: item.deptId,
        value: item.deptId,
        pId: item.parentId,
        title: item.deptName,
      };
      if (item.children && item.children.length) {
        obj.children = setTreeFormat(item.children);
      }
      newData.push(obj);
      return '';
    });
    return newData;
  };

  const setAreaTreeFormat = datas => {
    const newData = [];
    datas.map(item => {
      const obj = {
        id: item.branchCode,
        value: item.branchCode,
        pId: item.parentCode,
        title: item.branchName,
        isLeaf: !item.parentNode,
      };
      newData.push(obj);
      return '';
    });
    return newData;
  };

  /**
   * @zh-CN 同步获取部门树
   *
   * @param fields
   */
  const getSysDeptAllTree = async fields => {
    try {
      const res = await sysDeptAllTree({ ...fields });
      if (res.code === 0) {
        setSysDeptAllTreeData(setTreeFormat([res.data]));
        return;
      }
    } catch (error) {
      message.error('获取部门失败，请重试');
      return false;
    }
  };
  // 选择部门
  const deptOnChange = (value, a, b) => {
    setDept(value);
  };
  const select = (a, b, c) => {
    form.setFieldsValue({ orderNum: b?.children?.length || 0 });
  };

  useEffect(() => {
    // setDeptData(sysDeptData);
    setAreaData(setAreaTreeFormat(asynchTreeData));
    if (!sysDeptAllTreeData && visible) {
      getSysDeptAllTree();
    }
    if (type === 'updata' && visible === true) {
      getDetailData();
    } else {
      setAreaValue();
      form.resetFields();
      setDept('');
      setAreaValue('');
      setAreaName('');
    }
    form.setFieldsValue({ status: 0, orderNum: currentIndex });
  }, [visible]);

  // tree--------------------------------------------------------------------------------------
  // const onLoadData = ({ id }) =>
  //   getSysDeptTreelist({ deptId: id }).then(res => {
  //     if (res.code === 0) {
  //       setDeptData(deptData.concat(setTreeFormat(res.data)));
  //     }
  //   });
  // const treeDataChange = value => {
  //   setDeptValue(value);
  // };
  // const tProps = {
  //   treeData: deptData && deptData.length ? deptData : sysDeptData,
  //   value: deptValue,
  //   onChange: value => {
  //     treeDataChange(value);
  //   },
  //   placeholder: '',
  //   style: {
  //     width: '100%',
  //   },
  // };

  //-------------------------------------------------------------------------

  /**
   * @en-US Update node
   * @zh-CN values
   *
   * @param fields
   */
  const updataData = async values => {
    const hide = message.loading('正在添加');
    setLoading(true);
    try {
      const msg = await upadataField({
        ...values,
        deptId: data.deptId,
        parentId: dept,
        branchCode: areaValue,
      });
      hide();
      setLoading(false);
      if (msg.code === 0) {
        onCancel(false);
        onSuccess();
        message.success('操作成功');
      } else {
        message.error(msg.msg || '操作失败，请重试');
      }
      return true;
    } catch (error) {
      hide();
      setLoading(false);
      onCancel(false);
      message.error('操作失败，请重试');
      return false;
    }
  };
  /**
   * @en-US Update node
   * @zh-CN 添加部门
   *
   * @param values
   */
  const addData = async values => {
    const hide = message.loading('正在添加');

    try {
      const msg = await addField({ ...values, parentId: dept, branchCode: areaValue });
      hide();
      setLoading(false);
      if (msg.code === 0) {
        message.success('修改成功');
        onSuccess();
        onCancel(false);
      } else {
        message.error(msg.msg || '修改失败，请重试');
      }
      return true;
    } catch (error) {
      hide();
      setLoading(false);
      onCancel(false);
      message.error('修改失败，请重试');
      return false;
    }
  };

  /**
   * @en-US Update node
   * @zh-CN 更新节点
   *
   * @param values
   */
  const sendData = () => {
    if (!dept) {
      message.error('请选择父级部门');
      return;
    }
    form.validateFields().then(values => {
      if (type === 'updata') updataData(values);
      if (type === 'add') addData(values);
    });
  };

  const modelClose = () => {
    onCancel(false);
  };
  // ------------------------------区域tree -----------------------

  const areaOnLoadData = ({ id }) =>
    asynchTree({ branchCode: id }).then(res => {
      if (res.code === 0) {
        setAreaData(areaData.concat(setAreaTreeFormat(res.data)));
      }
    });

  const areaTreeDataChange = value => {
    setAreaValue(value);
    setAreaName(value);
  };

  const areaTProps = {
    treeData: areaData && areaData.length ? areaData : setAreaTreeFormat(asynchTreeData),
    value: areaName,
    onChange: value => {
      console.log(1111, value);
      areaTreeDataChange(value);
    },
    placeholder: '',
    style: {
      width: '100%',
    },
  };

  return (
    <>
      <Drawer
        getContainer={false}
        width={640}
        title={type === 'updata' ? '修改' : '添加'}
        visible={visible}
        onClose={modelClose}
        maskClosable={false}
        footer={
          <div
            style={{
              textAlign: 'right',
            }}
          >
            <Button onClick={modelClose} style={{ marginRight: 10 }}>
              取消
            </Button>
            <Button onClick={sendData} type="primary" loading={loading} disabled={loading}>
              保存
            </Button>
          </div>
        }
      >
        <Spin spinning={loading}>
          <Form {...formItemLayout} name="control-ref" form={form}>
            {/* <div className={styles.treeBox}>
            <Row>
              <Col span={14} push={4}>
                {visible && sysDeptData && sysDeptData.length && (
                  <TreeSelect
                    {...tProps}
                    treeDataSimpleMode
                    loadData={obj => onLoadData(obj)}
                    allowClear
                  />
                )}
              </Col>
              <Col span={4} pull={14}>
                <div className={styles.treeName}>上级部门：</div>
              </Col>
            </Row>
          </div> */}
            {visible && (
              <div className={styles.treeBox}>
                <Row>
                  <Col span={14} push={4}>
                    <TreeSelect
                      treeData={sysDeptAllTreeData}
                      placeholder="父级部门"
                      onSelect={select}
                      value={dept}
                      style={{ width: 340 }}
                      allowClear
                      showSearch
                      onChange={(value, label, extra) => {
                        deptOnChange(value, label, extra);
                      }}
                    />
                  </Col>
                  <Col span={4} pull={14}>
                    <div className={styles.treeName}>
                      <em className="star">*</em>父级部门：
                    </div>
                  </Col>
                </Row>
              </div>
            )}
            <Form.Item label="部门名称" name="deptName" rules={[{ required: true }]}>
              <Input maxLength={20} allowClear />
            </Form.Item>{' '}
            <Form.Item label="部门类型	" name="deptType" placeholder="部门职能类型、比如：财务">
              <Input maxLength={20} allowClear placeholder="部门职能类型、比如：财务" />
            </Form.Item>
            <Form.Item label="负责人" name="leader">
              <Input maxLength={20} allowClear />
            </Form.Item>
            <Form.Item label="手机号" name="phone">
              <Input maxLength={11} allowClear />
            </Form.Item>
            <Form.Item label="email" name="email">
              <Input maxLength={100} allowClear />
            </Form.Item>
            <Form.Item width="xs" name="orderNum" label="显示顺序" rules={[{ required: true }]}>
              <InputNumber min={0} max={1000} />
            </Form.Item>
            {visible && (
              <div className={styles.treeBox}>
                <Row>
                  <Col span={14} push={4}>
                    <TreeSelect
                      {...areaTProps}
                      treeDataSimpleMode
                      loadData={obj => areaOnLoadData(obj)}
                      allowClear
                    />
                  </Col>
                  <Col span={4} pull={14}>
                    <div className={styles.treeName}>
                      <em className="star">*</em>选择区域：
                    </div>
                  </Col>
                </Row>
              </div>
            )}
            <Form.Item name="status" label="部门状态">
              <Radio.Group>
                <Radio value={0}>正常</Radio>
                <Radio value={1}>停用</Radio>
              </Radio.Group>
            </Form.Item>
          </Form>
        </Spin>
      </Drawer>
    </>
  );
};

export default UpdateForm;
